<template>
  <div class='system-dict-container layout-padding'>
    <div class='system-dict-padding layout-padding-auto layout-padding-view'>
      <div class='system-user-search mb15'>
        <el-input size='default' placeholder='请输入字典名称' style='max-width: 180px'></el-input>
        <Auth-Btn :value="'system:dict:query'" size='default' type='primary' class='ml10'
                  title='查询' @click='onClickFindDictEvent'/>
        <Auth-Btn :value="'system:dict:add'" size='default' type='success' class='ml10'
                  title='新增字典' icon='FolderAdd' @click="onOpenDictDialog('add')"/>
      </div>
      <el-table :data='state.tableData.data' v-loading='state.tableData.loading' style='width: 100%'
                row-key='id' :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
        <el-table-column type='expand'>
          <template #default='scope'>
            <el-table :data='scope.row.items' :border='true' size='small' style="margin-left: 60px;">
              <el-table-column label='字典标签' prop='label'/>
              <el-table-column label='字典值' prop='value'/>
              <el-table-column label='描述' prop='remark'/>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column type='index' label='序号' width='60'/>
        <el-table-column prop='name' label='字典名称' show-overflow-tooltip></el-table-column>
        <el-table-column prop='type' label='字段名' show-overflow-tooltip></el-table-column>
        <el-table-column prop='remark' label='字典描述' show-overflow-tooltip></el-table-column>
        <el-table-column prop='status' label='字典状态' show-overflow-tooltip>
          <template #default='scope'>
            <el-tag :type="getStatusColor(scope.row.status)">{{ getStatusLabel(scope.row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop='createAt' label='创建时间' show-overflow-tooltip></el-table-column>
        <el-table-column label='操作' width='160'>
          <template #default='scope'>
            <Auth-Btn :value="'system:dict:update'" size='default' type='success'
                      title='修改' text @click="onOpenDictDialog('edit', scope.row)"/>
            <Auth-Btn :value="'system:dict:delete'" size='default' type='success'
                      title='删除' text @click='onRowDel(scope.row)'/>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
          @size-change='onHandleSizeChange'
          @current-change='onHandleCurrentChange'
          class='mt15'
          :pager-count='5'
          :page-sizes='[10, 20, 30]'
          v-model:current-page='state.tableData.param.pageNum'
          background
          v-model:page-size='state.tableData.param.pageSize'
          layout='total, sizes, prev, pager, next, jumper'
          :total='state.tableData.total'
      >
      </el-pagination>
    </div>
    <DictDialog ref='dictDialogRef' @refresh='getTableData()'/>
  </div>
</template>

<script setup lang='ts' name='systemDic'>
import {defineAsyncComponent, onMounted, reactive, ref} from 'vue';
import {ElMessage, ElMessageBox} from 'element-plus';
import {useDictApi} from '/@/api/dict';
import {StatusEnum} from "/@/types/enums/StatusEnum";
import {ColorEnum} from "/@/types/enums/ColorEnum";

/**
 * 获取状态颜色
 */
const getStatusColor = (status: string) => {
  return ColorEnum[getStatusLabel(status)];
}

/**
 * 获取状态文本
 */
const getStatusLabel = (status: string) => {
  return StatusEnum[status];
}

const AuthBtn = defineAsyncComponent(() => import('/@/components/auth/authBtn.vue'));

// 引入组件
const DictDialog = defineAsyncComponent(() => import('/@/views/system/dict/dialog.vue'));

// 定义变量内容
const dictDialogRef = ref();
const state = reactive<TableType<DictEntity>>({
  tableData: {
    data: [],
    loading: false,
    total: 0,
    param: {
      search: '',
      page: 1,
      size: 10,
    },
  },
});

// 初始化表格数据
const getTableData = () => {
  state.tableData.loading = true;
  useDictApi().dictPage().then(res => {
    if (res.code === 0) {
      state.tableData.data = res.data.content;
      state.tableData.total = res.data.totalElements;
      state.tableData.loading = false;
    }
  }).catch(error => {
    // 提示内容
    ElMessage.warning(error);
    state.tableData.loading = false;
  });
};
// 打开修改字典弹窗
const onOpenDictDialog = (type: string, row: DictEntity) => {
  dictDialogRef.value.openDialog(type, row);
};
// 删除字典
const onRowDel = (row: DictEntity) => {
  ElMessageBox.confirm(`此操作将永久删除字典名称：“${row.name}”，是否继续?`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    useDictApi().deleteDict(row.id).then(res => {
      if (res.code === 0) {
        ElMessage.success('删除成功');
        getTableData();
      }
    });
  }).catch(() => {
  });
};
// 分页改变
const onHandleSizeChange = (val: number) => {
  state.tableData.param.page = val;
  getTableData();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
  state.tableData.param.size = val;
  getTableData();
};
// 菜单查询：本地查询即可
const onClickFindDictEvent = () => {
  getTableData();
};
// 页面加载时
onMounted(() => {
  getTableData();
});
</script>

<style scoped lang='scss'>
.system-dict-container {
  .system-dict-padding {
    padding: 15px;

    .el-table {
      flex: 1;
    }
  }
}
</style>
